<template>
	<div class="inner-content">
        <div class='title'>
            订单列表
        </div>
        <el-button-group>
        	<el-button :type='!isFinish ? "primary" : ""' @click='changeList(false)'>未完成</el-button>
        	<el-button :type='isFinish ? "primary" : ""' @click='changeList(true)'>已完成</el-button>
        </el-button-group>
		<el-table v-show='!isFinish'
	        :data="tableData">
	        <el-table-column
	            prop="orderWaterStoreId"
	            label="订单号"
	            width='170'>
	        </el-table-column>
	        <el-table-column
	            label="日期"
	            width='160'>
	            <template scope='scope'>
	            	{{$$formatTime2(scope.row.receiveTime)}}
	            </template>
	        </el-table-column>
	        <el-table-column
	            prop="waterDeliverName"
	            label="送水工"
	            width='120'>
	        </el-table-column>
	        <el-table-column
	            prop="waterDeliverContact"
	            label="联系方式"
	            width='130'>
	        </el-table-column>
	        <el-table-column
	            label="商品信息"
	            width='210'>
	            <template scope='scope'>
	            	<p v-for='water in scope.row.orderWaBuOrUsInfos'>
	            		{{water.brand + water.name}}<span class='water-count'>x{{water.count}}</span>
	            	</p>
	            </template>
	        </el-table-column>  
	        <el-table-column
	            label="总数"
	            width='97'>
	            <template scope='scope'>
	            	{{scope.row.count}}桶
	            </template>
	        </el-table-column>
	        <el-table-column
	            label="合计"
	            width='87'>
	            <template scope='scope'>
	            	￥{{scope.row.total}}
	            </template>
	        </el-table-column>
	        <el-table-column
	            label="收到空桶"
	            width='97'>
	            <template scope='scope'>
	            	{{scope.row.numEmptyBucketsReceived}}个
	            </template>
	        </el-table-column>
	        <el-table-column
	            label="押金"
	            width='97'>
	            <template scope='scope'>
	            	￥{{scope.row.deposit}}
	            </template>
	        </el-table-column>
        </el-table>

        <el-table v-show='isFinish'
	        :data="tableData">
	        <el-table-column
	            prop="orderWaterStoreId"
	            label="订单号"
	            width='170'>
	        </el-table-column>
	        <el-table-column
	            label="日期"
	            width='160'>
	            <template scope='scope'>
	            	{{$$formatTime2(scope.row.receiveTime)}}
	            </template>
	        </el-table-column>
	        <el-table-column
	            label="订单状态"
	            width='100'>
	            <template scope='scope'>
	            	{{scope.row.status === 0 ? '已完成' : '已取消'}}
	            </template>
	        </el-table-column>
	        <el-table-column
	            prop="waterDeliverName"
	            label="送水工"
	            width='120'>
	        </el-table-column>
	        <el-table-column
	            prop="waterDeliverContact"
	            label="联系方式"
	            width='130'>
	        </el-table-column>
	        <el-table-column
	            label="商品信息"
	            width='210'>
	            <template scope='scope'>
	            	<p v-for='water in scope.row.orderWaBuOrUsInfos'>
	            		{{water.brand + water.name}}<span class='water-count'>x{{water.count}}</span>
	            	</p>
	            </template>
	        </el-table-column>  
	        <el-table-column
	            label="总数"
	            width='97'>
	            <template scope='scope'>
	            	{{scope.row.count}}桶
	            </template>
	        </el-table-column>
	        <el-table-column
	            label="合计"
	            width='87'>
	            <template scope='scope'>
	            	￥{{scope.row.total}}
	            </template>
	        </el-table-column>
	        <el-table-column
	            label="收到空桶"
	            width='97'>
	            <template scope='scope'>
	            	{{scope.row.numEmptyBucketsReceived}}个
	            </template>
	        </el-table-column>
	        <el-table-column
	            label="押金"
	            width='97'>
	            <template scope='scope'>
	            	￥{{scope.row.deposit}}
	            </template>
	        </el-table-column>
        </el-table>
        <el-row v-show='total'>
            <div class="pagination">
                <el-pagination
                    @current-change='handleCurrentChange'
                    :page-size= 'size'
                    :current-page='page'
                    layout="prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </el-row>
	</div>
</template>

<script>
	import ListJS from './List.js';
	module.exports = ListJS
</script>

<style>
	.water-count {
		float: right;
	}
	.el-button-group {
		margin-bottom: 20px;
	}
	.pagination {
		margin: 20px 0;
		text-align: center;
	}
</style>